<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) in pages" :key="index">
        <div class="icon" v-for="(item,index) in page" :key="item.id">
          <img :src="item.imgUrl"/>
          <p>{{item.desc}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: "HomeIcons",
    props: {
       icons: {
          type: Array
       }
    },
    data(){
      return {
        swiperOption: {
          pagination: ".swiper-pagination"
        },
        // imgUrl: [
        //   {id: "001",
        //     url: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
        //     desc: "景点门票"
        //   },
        //   {id: "002",
        //     url: "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
        //     desc: "一日游"
        //   },
        //   {id: "003",
        //     url: "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
        //     desc: "北京必游"
        //   },
        //   {id: "004",
        //     url: "http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png",
        //     desc: "水上乐园"
        //   },
        //   {id: "005",
        //     url: "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/0334cf5430b9b5505fd79e2b8d7e8670.png",
        //     desc: "爬长城"
        //   },
        //   {id: "006",
        //     url: "http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png",
        //     desc: "故宫"
        //   },
        //   {id: "007",
        //     url: "http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
        //     desc: "动植物园"
        //   },
        //   {id: "008",
        //     url: "http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",
        //     desc: "北京动物园"
        //   },
        //   {id: "009",
        //     url: "http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",
        //     desc: "北京动物园"
        //   }
        // ]
      }
    },
    //当有多个导航，但空间不够时，会将多余的导航导入另一个新的页面中，所以就需要一个逻辑
    computed: {
      pages () {
        const pages = [];
        this.icons.forEach((item,index) =>{
          const page = Math.floor(index / 8);
          if(!pages[page]){
            pages[page] = [];
          }
          pages[page].push(item);
        });
        return pages;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .icons >>> .swiper-container{
    height: 0
    padding-bottom 50%
  }

  .icons >>> .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom 1px
  }
  .icons >>> .swiper-pagination-bullet-active
    background #00bcd4
  .icons
    width: 100%
    overflow hidden
    margin : .10rem auto
    .icon
      width: 25%
      text-align center
      padding-bottom 25%
      height 0
      float left
      img{
        width: 60%
        margin-top .006rem
      }
      p{
        margin-top .10rem
      }
</style>
